<!-- 成果管理 -->
<template>
  <div class="achievement" style="padding: 20px;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="成果名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入成果名称关键字" clearable @keyup.enter.native="getList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
      <el-col :span="1.5">
        <el-button v-hasPermi="['xmgl:achievement:add']" type="primary" plain icon="el-icon-plus" size="mini"
          @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" row-key="id" ref="table" :data="tableData">
      <el-table-column label="成果编号" prop="no" align="center" />
      <el-table-column label="成果名称" align="center" prop="name">
      </el-table-column>
      <el-table-column label="成果类型" align="center" prop="type">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.xmgl_task_achievement" :value="scope.row.type"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="成果数量" align="center" prop="taskCount" />
      <!-- <el-table-column label="成果产值" align="center" prop="outputValue" /> -->
      <el-table-column label="生产部门" align="center" prop="produceDeptId">
        <template slot-scope="scope">
          <dict-tag :options="deptList" :value="scope.row.produceDeptId"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="存放目录" align="center" prop="storagePath" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.xmgl_status" :value="scope.row.status"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column width="300" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)">查看</el-button>
          <el-button :disabled="scope.row.status === '3'" v-hasPermi="['xmgl:achievement:edit']" size="mini" type="text"
            icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button :disabled="scope.row.status === '3'" v-hasPermi="['xmgl:achievement:remove']" size="mini" type="text"
            icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          <el-button :disabled="scope.row.status === '3'" v-hasPermi="['xmgl:achievement:accept']" size="mini" type="text"
            icon="el-icon-el-icon-s-promotion" @click="handleAccept(scope.row)">
            {{ scope.row.status === '3' ? '已接收归档' : '接收归档' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px">
        <el-form-item label="成果编号" prop="no">
          <el-input :disabled="isLook" clearable v-model="ruleForm.no" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="成果名称" prop="name">
          <el-input :disabled="isLook" clearable v-model="ruleForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="生产成果部门" prop="produceDeptId">
          <treeselect :disabled="isLook" v-model="ruleForm.produceDeptId" :options="deptTreeList" :normalizer="normalizer"
            placeholder="选择部门" />
        </el-form-item>
        <el-form-item label="成果数量(个)" prop="taskCount">
          <el-input-number :disabled="isLook" v-model="ruleForm.taskCount" style="width: 100%;" :min="0"
            placeholder="请输入"></el-input-number>
        </el-form-item>
        <el-form-item label="成果类型" prop="type">
          <el-select :disabled="isLook" clearable v-model="ruleForm.type" filterable style="width: 100%;"
            placeholder="请选择">
            <el-option v-for="item in dict.type.xmgl_task_achievement" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="成果产值" prop="outputValue">
          <div style="width:100%; display: flex;">
            <el-input-number :disabled="isLook" v-model="ruleForm.outputValue" style="flex: 1;" :min="0"
              placeholder="请输入"></el-input-number>
            <el-dropdown :disabled="isLook" trigger="click" @command="handleDownClick">
              <el-button :disabled="isLook" style="width: 90px;">
                {{ ruleForm.taskUnit }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="万元">万元</el-dropdown-item>
                <el-dropdown-item command="元">元</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-form-item> -->
        <el-form-item label="成果存放目录" prop="storagePath">
          <el-input :disabled="isLook" clearable v-model="ruleForm.storagePath" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="成果内容描述" prop="content">
          <el-input :disabled="isLook" v-model="ruleForm.content" type="textarea" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input :disabled="isLook" v-model="ruleForm.remark" type="textarea" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" v-if="!isLook" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listDept } from "@/api/system/dept";
import { getDeptList } from "@/api/project/project";
import { getAchievementList, getAchievement, deleteAchievement, editAchievement, addAchievement, tacceptAchievement } from "@/api/project/achievement.js";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  dicts: ['xmgl_task_achievement', 'xmgl_status'],
  components: {
    Treeselect
  },
  data() {
    return {
      deptList: [],
      isLook: false,
      deptTreeList: [],
      saveLoading: false,
      queryParams: {},
      loading: false,
      tableData: [],
      dialogVisible: false,
      title: '新增成果申请',
      ruleForm: {
        taskUnit: '万元'
      },
      rules: {
        no: [{ required: true, message: '请输入成果编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入成果名称', trigger: 'blur' }],
        produceDeptId: [{ required: true, message: '请输入生产成果部门', trigger: 'blur' }],
        storagePath: [{ required: true, message: '请输入成果存放路径', trigger: 'blur' }],
        taskCount: [{ required: true, message: '请输入成果数量', trigger: 'blur' }],
        taskUnit: [{ required: true, message: '请输入成果数量单位', trigger: 'blur' }],
        type: [{ required: true, message: '请输入成果类型', trigger: 'blur' }],
        content: [{ required: true, message: '请输入成果内容', trigger: 'blur' }],
        outputValue: [{ required: true, message: '请输入成果产值', trigger: 'blur' }],
      }
    };
  },

  created() {
    this.getDeptList();
    this.getList();
  },

  methods: {
    // 获取部门树结构
    async getDeptList() {
      const res = await getDeptList();
      this.deptTreeList = res.data;
      const res1 = await listDept();
      this.deptList = res1.data.map(item => {
        return {
          value: item.deptId,
          label: item.deptName,
          raw: {
            listClass: 'default'
          }
        }
      })
    },
    async getList() {
      this.loading = true;
      const res = await getAchievementList(this.$route.query.taskId, this.queryParams);
      if (res.code === 200) {
        this.tableData = res.rows;
      }
      this.loading = false;
    },
    // 产值单位赋值
    handleDownClick(value) {
      this.$set(this.ruleForm, 'taskUnit', value);
    },
    // 重置按钮
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
      this.getList();
    },
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false;
      this.resetForm('ruleForm');
      this.ruleForm = this.$options.data().ruleForm;
      this.isLook = false;
    },
    // 添加按钮
    handleAdd() {
      this.dialogVisible = true;
      this.title = '新增成果申请';
    },
    // 修改按钮
    async handleUpdate(row) {
      const res = await getAchievement(this.$route.query.taskId, row.id);
      this.ruleForm = res.data;
      this.dialogVisible = true;
      this.title = '编辑成果申请';
    },
    // 查看
    async handleLook(row) {
      const res = await getAchievement(this.$route.query.taskId, row.id);
      this.ruleForm = res.data;
      this.dialogVisible = true;
      this.title = '查看成果申请';
      this.isLook = true;
    },
    // 确认
    submit() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.saveLoading = true;
          this.ruleForm.taskId = this.$route.query.taskId;
          if (this.ruleForm.id !== undefined) {
            editAchievement(this.$route.query.taskId, this.ruleForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.handleClose();
              this.getList();
            });
          } else {
            addAchievement(this.$route.query.taskId, this.ruleForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.handleClose();
              this.getList();
            });
          }
          this.saveLoading = false;
        }
      });
    },
    // 接收
    handleAccept(row) {
      this.$modal.confirm('是否确认接收成果名称为"' + row.name + '"的数据项？').then(() => {
        return tacceptAchievement(this.$route.query.taskId, row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("接收成功");
      }).catch(() => { });
    },
    // 删除
    handleDelete(row) {
      this.$modal.confirm('是否确认删除成果名称为"' + row.name + '"的数据项？').then(() => {
        return deleteAchievement(this.$route.query.taskId, row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.value,
        label: node.label,
        children: node.children
      };
    },
  },
};
</script>

<style lang="scss" scoped></style>
